


<template>
    <div class="sdy-category">
        <SdyHeader title="啥都有-商品分类" back></SdyHeader>
        <div class="slide">
            <van-sidebar v-model="index" @change="slidechangehandler">
            <van-sidebar-item 
            v-for="item in cateList"
            :key="item"
            :title="item"  />
            </van-sidebar>
        </div>
        <div class="content">
      <div v-for="item in goodsList" :key="item">
        <p class="title">{{ item.brand }}</p>
        <ul>
          <li v-for="t in item.list" :key="t">
            <img :src="t.img1" alt="">
            <span>名称</span>
          </li>
        </ul>
      </div>
    </div>
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import {categoryListApi,cateBrandListApi,categortBrandGoodsListApi} from '@/api/goods'
// import { isTemplateNode } from '@vue/compiler-core'
import type {MyCateBrandGoodsItem} from '@/config/inter'

const index = ref<number>(0)

// 准备一个右侧内容渲染的数组
const goodsList = ref<MyCateBrandGoodsItem[]>([])

// 准备一个根据当前分类请求分类内所有数据的方法
const getGoodsList = async (cate:string)=>{
    // console.log(`根据${cate} 去渲染页面`)

    // 1.根据cate请求品牌分类列表
    const brandList = await cateBrandListApi(cate)
    // console.log(brandList) 

    // 2.根据品牌列表去渲染商品列表信息
     const list:Promise<any>[] = []
    // brandList.data是从cate分类获取的品牌分类列表
    brandList.data.forEach((item:{brand:string})=>{
    // 向List数组内添加执行的各商品列表信息 
    list.push(categortBrandGoodsListApi(cate,item.brand))
    })
    // list 最终每一项都是各商品列表信息 
    const goods = await Promise.all(list)
    // console.log(goods)

    // 3. 组装数据
    const res: MyCateBrandGoodsItem[] = []
    brandList.data.forEach((item: { brand: string }, index: number) => {
    res.push({
      cate,
      brand: item.brand,
      list: goods[index].data
            })
    })
    goodsList.value = res
    console.log(res)
}


// 准备分类数组
const cateList = ref<string[]>([]) 

const slidechangehandler = async (index:number)=>{

    // 拿到当前索引的数据   index表示当前分类的索引  cate代表哪一类
    const cate = cateList.value[index].trim()
    getGoodsList(cate)
    // // console.log(cate)
    // // 用哪一类请求回来该分类有多少品牌
    // const brandList = await cateBrandListApi(cate)
    // // console.log(brandList.data) console.log(brandList)
    // const list:Promise<any>[] = []
    // // brandList.data是从cate分类获取的品牌分类列表
    // brandList.data.forEach((item:{brand:string})=>{
    // // 向List数组内添加执行的各商品列表信息 
    // list.push(categortBrandGoodsListApi({category:cate,brand:item.brand}))
    // })
    // // list 最终每一项都是各商品列表信息 
    // const res = await Promise.all(list)
    // console.log(res)

    // promise.all调用的是多个  需要用数组包裹
}


onMounted(async ()=>{
    const res = await categoryListApi()
    cateList.value = res.data
    // 加载完毕后就渲染第一个
    getGoodsList(res.data[0])
})
</script>




<style scoped lang="scss">
.sdy-category {
  display: flex;
  height: 100%;

  > .slide {
    height: 100%;
    position: relative;
    width: 80px;
    overflow: hidden;

    > .inner {
      position: absolute;
      left: 0;
    }
  }

  > .content {
    flex: 1;
    overflow-y: auto;

    > .item {

      > .title {
        height: 30px;
        font-weight: 700;
      }

      > ul {
        display: flex;
        box-sizing: border-box;
        padding: 10px;
        justify-content: space-evenly;

        > li {
          display: flex;
          flex-direction: column;
          align-items: center;

          > img {
            width: 50px;
            height: 50px;
            display: block;
          }
        }
      }
    }
  }
}
</style>
